<template>
  <!-- 容器添加类名,防止样式冲突 -->
  <div class="tabbar">
    <item txt="首页" mark="home" :sel="selected" @change="getVal"> <!-- 注意:谁触发监听由谁接收,方法名不加括号 -->
      <img src="../assets/images/ic_tab_home_active.png" slot="activeImg" />
      <img src="../assets/images/ic_tab_home_normal.png" slot="normalImg" />
    </item>
    <item txt="书影音" mark="audio" :sel="selected" @change="getVal">
      <img src="../assets/images/ic_tab_subject_active.png" slot="activeImg" />
      <img src="../assets/images/ic_tab_subject_normal.png" slot="normalImg" />
    </item>
    <item txt="广播" mark="broadcast" :sel="selected" @change="getVal">
      <img src="../assets/images/ic_tab_status_active.png" slot="activeImg" />
      <img src="../assets/images/ic_tab_status_normal.png" slot="normalImg" />
    </item>
    <item txt="小组" mark="group" :sel="selected" @change="getVal">
      <img src="../assets/images/ic_tab_group_active.png" slot="activeImg" />
      <img src="../assets/images/ic_tab_group_normal.png" slot="normalImg" />
    </item>
    <item txt="我的" mark="mine" :sel="selected" @change="getVal">
      <img src="../assets/images/ic_tab_profile_active.png" slot="activeImg" />
      <img src="../assets/images/ic_tab_profile_normal.png" slot="normalImg" />
    </item>
  </div>
</template>

<script>
import Item from './item.vue'

export default {
  components: {
    Item
  },
  data: function(){
    return{
      selected: 'home'   // 标识当前选中的是哪个标签，传递给子组件"item"做样式更替，默认是'home'标签
    }
  },
  methods: {
    getVal: function(val){
      this.selected = val;
    }
  }
}
</script>

<style>
  .tabbar{
    width: 100%; height: 64px; border-top: 1px solid #ccc;
    position: fixed; left: 0; bottom: 0; background-color: #FFF;
  }
</style>
